// 在组件实例中使用方便展示，在编辑区以及预览区使用不到
var timeDate = "map" + new Date().getTime();
var newMapDate = ""; // 生成新Echart的map（主要用于编辑和预览场景）
var mapDataRender = [];
var timer;
const delayTime = 3000;
var mapGeoJson;

// for (let i = 0; i < 3; i++) {
//   console.log(new Date().getTime())
// }

function defineComponentProps() {
  const componentProps = {
    mapInfo: {
      dataType: 1,
      mapName: "广州市",
      url: "",
      mapCode: "440100",
    },
  };
  let option = {
    backgroundColor: "",
    // title: {
    //   show: true,
    //   text: "行政区域图",
    //   left: "40%",
    //   textStyle: {
    //     color: 'rgba(64, 158, 255, 1)',
    //   }
    // },
    tooltip: {
      backgroundColor: "rgba(0,0,0,0)",
      trigger: "item",
    },
    legend: {
      show: false,
    },
    series: [
      {
        tooltip: {
          show: true,
          padding: [6, 10],
          backgroundColor: "rgba(255,255,255,.8)",
          borderColor: "#fff",
          borderRadius: "10px",
          textStyle: {
            align: "left",
            verticalAlign: "middle",
            lineHeight: 26,
            color: "rgba(0,0,0,.7)",
          },
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: function (item) {
        //     if (!item) return
        //     const mainDivElement = document.createElement("div");

        //     // 最外层DIV
        //     const outerDivElement = document.createElement("div");
        //     outerDivElement.style.background = "#FFF"
        //     outerDivElement.style.borderRadius = "10px"
        //     outerDivElement.style.paddingTop = "10px"
        //     // outerDivElement.style.boxShadow = "0 0 10px #666"

        //     // 上面文本名称DIV
        //     const nameDivElement = document.createElement("div");
        //     nameDivElement.style.background = ""
        //     nameDivElement.style.color = "#000"
        //     nameDivElement.style.height = "20px"
        //     nameDivElement.style.borderRadius = "6px"
        //     nameDivElement.style.fontSize = "12px"
        //     nameDivElement.style.lineHeight = "20px"
        //     nameDivElement.style.textAlign = "center"
        //     nameDivElement.style.margin = "0 2px"
        //     // 文字名称DIV内容设置
        //     const nameSpanElement = document.createElement("span");
        //     nameSpanElement.innerHTML = item.data.name

        //     // 下面文本名称
        //     const addressDivElement = document.createElement("div");
        //     addressDivElement.style.color = "#000"
        //     addressDivElement.style.textAlign = "center"
        //     addressDivElement.style.paddingTop = "8px 6px"
        //     // 下面文本具体内容
        //     const addressValSpanElement = document.createElement("span");
        //     addressValSpanElement.style.fontWeight = "bold"
        //     addressValSpanElement.style.fontSize = "18px"
        //     addressValSpanElement.innerHTML = item.data.value

        //     // 新增Element元素
        //     outerDivElement.appendChild(nameDivElement)
        //     nameDivElement.appendChild(nameSpanElement)
        //     outerDivElement.appendChild(addressDivElement)
        //     addressDivElement.appendChild(addressValSpanElement)

        //     mainDivElement.appendChild(outerDivElement)
        //     return mainDivElement.innerHTML;
        //   },
        // },
        name: "数据",
        type: "map",
        map: timeDate, // 自定义扩展图表类型
        aspectScale: 1,
        zoom: 0.6, //缩放
        showLegendSymbol: false,
        label: {
          show: true,
          color: "rgba(255,255,255,1)",
          fontSize: 10,
        },
        itemStyle: {
          areaColor: "rgba(14,149,241,1)",
          borderColor: "rgba(233,233,233,1)",
          borderWidth: 1,
          shadowColor: "rgba(14,149,241,1)",
          shadowBlur: 20,
        },
        emphasis: {
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 10,
          },
          itemStyle: {
            areaColor: "rgba(255,240,64,1)",
            borderColor: "rgba(255,255,255,1)",
            borderWidth: 1,
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "160%",
        markPoint: {
          symbol: "none",
        },
        data: [],
      },
    ],
  };

  componentProps.options = option;
  // 循环
  // console.log("myChart", myChart)
  // 返回组件属性, 一定要return
  return componentProps;
}

async function defineComponentBeforeCreated({ VueElement }) {
  console.log("map002 defineComponentBeforeCreated")
  try {
    if (VueElement) {
      // 兼容2.5的写法，已经无全局变量需要调整处理
      if (
        VueElement.component.props &&
        VueElement.component.props.mapInfo.json
      ) {
        // 刷新后读取最新的数据
        window[`${VueElement.id}mapGepJson`] =
          VueElement.component.props.mapInfo.json;
      } else {
        // 若无切换图层则使用默认的数据
        // mapUrl地址会在SDA2.5中进行默认转换
        let mapUrl =
          BASE_URL +
          "/adminapp/public/assets/elfinder/files/json/geo/广州.json";
        let getMapJson = function () {
          return fetch(mapUrl).then((res) => res.json());
        };
        window[`${VueElement.id}mapGepJson`] = await getMapJson();
      }
      echarts.registerMap(VueElement.id, window[`${VueElement.id}mapGepJson`]);
    } else {
      // 兼容在组件库展示效果的写法
      let mapUrl =
        BASE_URL + "/adminapp/public/assets/elfinder/files/json/geo/广州.json";
      let getMapJson = function () {
        return fetch(mapUrl).then((res) => res.json());
      };
      mapGeoJson = await getMapJson();
      echarts.registerMap(VueElement ? VueElement.id : timeDate, mapGeoJson);
    }
  } catch (error) {
    console.log("error1", error);
  }
}

function defineComponentCreated({ VueInstance, VueElement }) {
  console.log("map002 defineComponentCreated")
  try {
    if (VueElement && VueInstance) {
      // 由于在defineComponentBeforeCreated生命周期中，无法获取VueInstance，所以在此生命周期重置地图唯一标识
      VueInstance.options.series[0].map = VueElement.id;
      // echarts.registerMap(VueElement.id, window[`${VueElement.id}mapGepJson`])
      VueInstance.options.series[0].data = mapDataRender;
      // VueInstance.updateOptions(VueInstance.options);
      // const myChart = VueInstance.getEChartInstance();
      // // 依次跳转显示 - begin
      // var arr = [
      //   "花都区",
      //   "从化区",
      //   "增城区",
      //   "黄埔区",
      //   "白云区",
      //   "天河区",
      //   "越秀区",
      //   "荔湾区",
      //   "海珠区",
      //   "番禺区",
      //   "南沙区",
      // ];
      // var index = 0;
      // timer = setInterval(function () {
      //   index = index < arr.length ? index : 0;
      //   showTips(arr[index++]);
      // }, 1000);

      // myChart.on("mouseover", function () {
      //   clearInterval(timer);
      // });

      // myChart.on("mouseout", function () {
      //   clearInterval(timer);
      //   timer = setInterval(function () {
      //     index = index < arr.length ? index : 0;
      //     showTips(arr[index++]);
      //   }, delayTime);
      // });
      // // 依次跳转显示 - end

      // function showTips(name) {
      //   mapDataRender = mapGeoJson.features.map((item) => {
      //     return {
      //       value: (Math.random() * 1000).toFixed(2),
      //       name: item.properties.name,
      //     };
      //   });

      //   mapDataRender.forEach((item, i) => {
      //     myChart.dispatchAction({
      //       type: "mapUnSelect",
      //       seriesIndex: 0,
      //       dataIndex: i,
      //     });
      //     if (item.name.includes(name)) {
      //       myChart.dispatchAction({
      //         type: "showTip",
      //         seriesIndex: 0,
      //         dataIndex: i,
      //       });
      //       myChart.dispatchAction({
      //         type: "mapSelect",
      //         seriesIndex: 0,
      //         dataIndex: i,
      //       });
      //     }
      //   });
      // }
    }
  } catch (error) {
    console.log("error2", error);
  }
}

async function updateMap(data, VueInstance) {
  let mapGeoJsonData = data;
  echarts.registerMap(VueInstance.options.series[0].map, mapGeoJsonData);
  mapDataRender = mapGeoJsonData.features.map((item) => {
    return {
      value: (Math.random() * 1000).toFixed(2),
      name: item.properties.name,
    };
  });
  if (VueInstance) {
    VueInstance.options.series[0].data = mapDataRender;
    VueInstance.updateOptions(VueInstance.options);
  }
}

async function handleDataCallback({ ResourceData, VueInstance,VueElement }) {
  console.log("map002 handleDataCallback")
  if (VueElement) {
    VueElement.component.props.options.series[0].map = VueElement.id
  }
  if (VueInstance) {
    updateMap(ResourceData, VueInstance);
  }
}
